<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/lib/layui/css/layui.css"/>
</head>
<body>
	<button onclick="add()">添加员工</button>
	<div class="layui-btn-group demoTable">
	  <button class="layui-btn" data-type="add">添加</button>
	  <button class="layui-btn" data-type="deleteAll">批量删除</button>
	</div>
	
	<table id="demo" lay-filter="test"></table>
	
	
	<script type="text/html" id="barDemo">
  	 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  	 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	 <script src="<%=request.getContextPath()%>/static/lib/jquery/jquery-1.11.1.js"></script>
	<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	    <script src="<%=request.getContextPath()%>/static/common/mylayer.js"></script>
		<script type="text/javascript">
			//使用哪个模块就加载哪个模块
			layui.use(['table'], function(){
				var table = layui.table;
				
				table.render({
				  elem: '#demo'
				  ,height: 460
				  ,url: '${pageContext.request.contextPath}/user/pageList.action' //数据接口
				  ,page: true //开启分页
				  ,cellMinWidth: 50 //列宽自动分配，全局定义常规单元格的最小宽度
				  ,id: "layUITableId" //设置容器的唯一id
				  ,cols: [[ //表头
				    {type: 'checkbox'} //显示批量删除的checkbox
				    ,{field: 'id', title: 'ID',  sort: true}
				    ,{field: 'name', title: '用户名'}
				    ,{field: 'password', title: '密码', sort: true}
				    ,{field: 'email', title: '邮箱'} 
				    ,{field: 'age', title: '年龄'}
				    ,{field: 'joindate', title: '入职日期'}
				    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
				  ]]
				 });
			  
				//监听行工具事件
				table.on('tool(test)', function(obj){
				  var data = obj.data;
				  console.log(obj)
				  if(obj.event === 'del'){
				    layer.confirm('真的删除行么', function(index){
				      console.log("dsdffd");
				      $.ajax({
				    	  url : "${pageContext.request.contextPath}/user/deleteById.action",
				    	  data : {"id" : data.id},
				    	  dataType : "json",
				    	  success : function(resp) {
				    		  if(resp.code == 0) {
				    			  mylayer.success(resp.msg);
				    			  table.reload("layUITableId");
				    		  } else {
				    			  layer.close(index);
				    			  mylayer.error(resp.msg);
				    		  }
				    	  }
				      });
				    });
				  } else if(obj.event === 'edit'){
					//layer弹框，弹出添加页面
					layer.open({
						type : 2,//iframe
						tile : "修改员工",
						area : ["200px", "200px"], //弹出层的宽和高
						content : "${pageContext.request.contextPath}/user/getUserUpdatePage.action?id=" + data.id
					});
				  }
				});
				
				
				var $ = layui.$, active = {
				    deleteAll: function(){ //获取选中数据
				      var checkStatus = table.checkStatus('layUITableId');
				      var data = checkStatus.data;
				      console.log(data);//选中行的数据
				      var ids = [];// [1,2,3]
				      for (var i in data) {
				    	  //data[i].id
				    	  ids.push(data[i].id);
				      }
				      ids = ids.join(",")// "1,2,3"
				      console.log(ids);
				      $.ajax({
				    	  url : "${pageContext.request.contextPath}/user/deleteAll.action",
				    	  data : {"ids" : ids},
				    	  dataType : "json",
				    	  success : function(resp) {
				    		  if(resp.code == 0) {
				    			  mylayer.success(resp.msg);
				    			  table.reload("layUITableId");
				    		  } else {
				    			  layer.close(index);
				    			  mylayer.error(resp.msg);
				    		  }
				    	  }
				      });
				    }
				    ,add: function(){ //添加
				      add();
				    }
				  };
				  
				  $('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				  });
				  
			});
			
			function add() {
				//layer弹框，弹出添加页面
				layer.open({
					type : 2,//iframe
					tile : "添加员工",
					area : ["300px", "400px"], //弹出层的宽和高
					content : "${pageContext.request.contextPath}/user/getUserAddPage.action"
				});
			}
			
		</script>
</body>
</html>